<template>
  <div id="matchResult">
    <!-- 4.匹配结果 -->
    <div class="showDiv04" ref="capture">
      <div class="topDiv">
        <div>
          <p>掌上精选智能匹配达人查询结果</p>
          <button @click="reMatch">重新匹配</button>
        </div>
        <div>
          <span v-if="matchTime">数据查询时间: {{ matchTime }}</span>
          <span v-else></span>
          <span @click="seeHistory">查看历史匹配记录 ></span>
        </div>
      </div>
      <section v-if="hasData">
        <p class="tips">
          共匹配到<span>{{ talentCount }}</span
          >个达人,仅展示排名靠前的TOP5达人详情. 如需全部达人信息,请
          <el-popover placement="bottom" trigger="hover">
            <div class="message_content">
              <div class="popper_arrow"></div>
              <img src="@/assets/img/xiaozhushou_qr.jpg" />
              <div>工作日：9:30--18:30</div>
            </div>
            <span slot="reference">联系客服</span>
          </el-popover>
        </p>
        <div class="tabBox">
          <div class="radioGroupBox">
            <el-radio-group v-model="talentRadio">
              <el-radio-button
                label="达人1"
                v-if="talentCount >= 1"
              ></el-radio-button>
              <el-radio-button
                label="达人2"
                v-if="talentCount >= 2"
              ></el-radio-button>
              <el-radio-button
                label="达人3"
                v-if="talentCount >= 3"
              ></el-radio-button>
              <el-radio-button
                label="达人4"
                v-if="talentCount >= 4"
              ></el-radio-button>
              <el-radio-button
                label="达人5"
                v-if="talentCount >= 5"
              ></el-radio-button>
            </el-radio-group>
          </div>
          <div class="export" @click="exportPdf">
             <span></span>导出
          </div>
        </div>
        <div class="detailsBox" v-if="!loadingD && talentInfo">
          <div class="talentDiv01">
            <div class="div01">
              <img
                :src="talentInfo.logo"
                alt=""
                class="avator"
                @click="toTalentPage(talentInfo.authorId)"
              />
              <div class="infoBox">
                <div class="titleBox">
                  <p @click="toTalentPage(talentInfo.authorId)">
                    {{ talentInfo.nickName }}
                  </p>
                  <el-popover placement="bottom" trigger="hover">
                    <vue-qr
                      :size="150"
                      :margin="0"
                      :auto-color="true"
                      :dot-scale="1"
                      :text="talentInfo.shareLink"
                    />
                    <p
                      style="
                        text-align: center;
                        font-size: 14px;
                        color: #888888;
                        margin-top: 10px;
                      "
                    >
                      查看抖音主页
                    </p>
                    <img
                      src="@/assets/meng/i21.png"
                      alt=""
                      slot="reference"
                      v-if="talentInfo.shareLink"
                    />
                  </el-popover>
                </div>
                <p class="idText">抖音号:{{ talentInfo.uniqueId }}</p>
                <div class="info">
                  <div>
                    <img src="@/assets/wang/tdetails/Gender.png" alt="" />
                    <span v-if="talentInfo.gender == 2">女</span>
                    <span v-else-if="talentInfo.gender == 1">男</span>
                    <span v-else>--</span>
                    <p></p>
                  </div>
                  <div v-if="talentInfo.birthday != 0">
                    <img src="@/assets/wang/tdetails/age.png" alt="" />
                    <span>{{ talentInfo.birthday }}岁</span>
                    <p></p>
                  </div>
                  <div v-if="talentInfo.birthday == 0">
                    <img src="@/assets/wang/tdetails/age.png" alt="" />
                    <span>--</span>
                    <p></p>
                  </div>
                  <div>
                    <img src="@/assets/wang/tdetails/map.png" alt="" />
                    <span v-if="talentInfo.province">{{
                      talentInfo.province
                    }}</span>
                    <span v-else>--</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="div02">
              <div class="divItem">
                <div class="itemdiv">
                  <p>{{ format_num(talentInfo.totalFans) }}</p>
                  <p>粉丝总量</p>
                </div>
                <div class="itemdiv">
                  <p>{{ format_num(talentInfo.totalFavorite) }}</p>
                  <p>点赞总量</p>
                </div>
                <div class="itemdiv">
                  <p v-if="talentInfo.expectLook != 0">
                    {{ format_num(talentInfo.expectLook) }}
                  </p>
                  <p v-if="talentInfo.expectLook == 0">-</p>
                  <p>预期观看人数</p>
                </div>
                <div class="itemdiv">
                  <p v-if="talentInfo.liveInteractionRate != 0">
                    {{ format_num(talentInfo.liveInteractionRate) }}%
                  </p>
                  <p v-if="talentInfo.liveInteractionRate == 0">-</p>
                  <p>直播互动率</p>
                </div>
              </div>
              <div class="divItem">
                <div class="itemdiv">
                  <p>
                    {{ format_num(talentInfo.liveProCount) }}/{{
                      format_num(talentInfo.liveProVolumeCount)
                    }}
                  </p>
                  <p>直播商品数/动销商品数</p>
                </div>
                <div class="itemdiv">
                  <p>{{ format_num(talentInfo.liveShopCount) }}</p>
                  <p>带货直播场次</p>
                </div>
                <div class="itemdiv">
                  <p>{{ format_num(talentInfo.avgLook) }}</p>
                  <p>平均场观人数</p>
                </div>
                <div class="itemdiv">
                  <p>{{ talentInfo.avgLookTime }}</p>
                  <p>人均看播时长</p>
                </div>
              </div>
            </div>
            <div class="div03">
              <div class="score">
                <p v-if="talentRadio == '达人1'">
                  {{ talentScoreList[0].toFixed(1) }}
                </p>
                <p v-if="talentRadio == '达人2'">
                  {{ talentScoreList[1].toFixed(1) }}
                </p>
                <p v-if="talentRadio == '达人3'">
                  {{ talentScoreList[2].toFixed(1) }}
                </p>
                <p v-if="talentRadio == '达人4'">
                  {{ talentScoreList[3].toFixed(1) }}
                </p>
                <p v-if="talentRadio == '达人5'">
                  {{ talentScoreList[4].toFixed(1) }}
                </p>
                <p>
                  <span>匹配分</span>
                  <el-tooltip
                    class="talentInfo"
                    effect="light"
                    placement="top"
                    popper-class="mytooltip"
                  >
                    <div slot="content">
                      匹配分：表示商品与该达人的匹配度<br />
                      取值范围60-100，分值越高，匹配度越高<br />
                    </div>
                    <img src="@/assets/meng/search_result04.png" alt="" />
                  </el-tooltip>
                </p>
              </div>
              <div class="score">
                <section
                  v-if="
                    talentInfo.tel ||
                      talentInfo.wechat ||
                      talentInfo.qq ||
                      talentInfo.email
                  "
                >
                  <p v-if="talentInfo.tel">{{ talentInfo.tel }}</p>
                  <el-tooltip
                    class="item"
                    effect="light"
                    :content="talentInfo.wechat"
                    placement="top"
                    popper-class="mytooltip"
                    :hide-after="2000"
                  >
                    <p v-if="!talentInfo.tel && talentInfo.wechat">
                      V:{{ talentInfo.wechat }}
                    </p>
                  </el-tooltip>
                  <p
                    v-if="
                      !talentInfo.tel && !talentInfo.wechat && talentInfo.qq
                    "
                  >
                    Q:{{ talentInfo.qq }}
                  </p>
                  <el-tooltip
                    class="item"
                    effect="light"
                    :content="talentInfo.email"
                    placement="top"
                    popper-class="mytooltip"
                    :hide-after="2000"
                  >
                    <p
                      v-if="
                        !talentInfo.tel &&
                          !talentInfo.wechat &&
                          !talentInfo.qq &&
                          talentInfo.email
                      "
                    >
                      {{ talentInfo.email }}
                    </p>
                  </el-tooltip>
                  <p class="concatWay">联系方式</p>
                </section>
                <section
                  v-if="
                    !talentInfo.tel &&
                      !talentInfo.wechat &&
                      !talentInfo.qq &&
                      !talentInfo.email
                  "
                >
                  <el-popover placement="right-start" trigger="hover">
                    <div class="message_content">
                      <div class="popper_arrow"></div>
                      <img src="@/assets/img/xiaozhushou_qr.jpg" />
                      <div>工作日：9:30--18:30</div>
                    </div>
                    <p slot="reference" class="kefuText">请联系客服</p>
                  </el-popover>
                  <p class="kefuText01">联系方式</p>
                </section>
              </div>
            </div>
          </div>
          <!-- 直播报价 -->
          <div
            class="talentDiv02"
            v-if="
              livepriceList.brandHour &&
                livepriceList.brandJoin &&
                livepriceList.electricityJoin &&
                livepriceList.electricitySpecial
            "
          >
            <div class="myTitleBox">
              <img src="@/assets/wang/tdetails/live.png" alt="" />
              <p class="bigText">直播报价</p>
            </div>
            <div class="priceBox">
              <div class="priceItem" v-if="livepriceList.brandHour">
                <p>
                  <span>¥ {{ livepriceList.brandHour }} / 小时</span
                  >&nbsp;&nbsp;&nbsp;<span
                    >¥ {{ livepriceList.brandDay }} / 天</span
                  >
                </p>
                <p>品牌专场</p>
              </div>
              <div class="priceItem" v-if="livepriceList.brandJoin">
                <p>¥ {{ livepriceList.brandJoin }} / 商品</p>
                <p>品牌拼场</p>
              </div>
              <div class="priceItem" v-if="livepriceList.electricityJoin">
                <p>¥ {{ livepriceList.electricityJoin }} / 商品</p>
                <p>电商专场</p>
              </div>
              <div class="priceItem" v-if="livepriceList.electricitySpecial">
                <p>¥ {{ livepriceList.electricitySpecial }} / 商品</p>
                <p>电商拼场</p>
              </div>
            </div>
          </div>
          <div class="myTitleBox addtop">
            <img src="@/assets/wang/tdetails/live.png" alt="" />
            <p class="bigText">直播电商战绩</p>
          </div>
          <!-- echarts图表 -->
          <div class="talentDiv03">
            <div class="pieItem">
              <div class="myTitleBox">
                <!-- <img src="@/assets/meng/my_header03.png" alt="" /> -->
                <p>商品分类分布</p>
              </div>
              <div class="pieChartBox">
                <BigPie
                  :valueData="goodsKindData"
                  v-if="!loading01 && goodsKindData.length != 0"
                />
                <div
                  v-if="goodsKindData.length == 0 && !loading01"
                  class="noDataNoticewl"
                >
                  目前没有可以查看的数据哟~
                </div>
                <div
                  v-loading="loading01"
                  v-if="loading01"
                  class="loading addTop"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                ></div>
              </div>
            </div>
            <div class="pieItem">
              <div class="myTitleBox">
                <!-- <img src="@/assets/meng/shop_details02.png" alt="" /> -->
                <p>商品价格分布</p>
              </div>
              <div class="pieChartBox">
                <BigPie
                  :valueData="priceKindList"
                  v-if="!loading02 && priceKindList.length != 0"
                />
                <div
                  v-if="!loading02 && priceKindList.length == 0"
                  class="noDataNoticewl"
                >
                  目前没有可以查看的数据哟~
                </div>
                <div
                  v-loading="loading02"
                  v-if="loading02"
                  class="loading addTop"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                ></div>
              </div>
            </div>
            <div class="pieItem">
              <div class="myTitleBox">
                <!-- <img src="@/assets/meng/video02_01.png" alt="" /> -->
                <p>直播观众性别分布</p>
              </div>
              <div class="pieChartBox">
                <BigPie
                  :valueData="genderList"
                  v-if="!loading03 && genderList.length != 0"
                />
                <div
                  v-if="!loading03 && genderList.length == 0"
                  class="noDataNoticewl"
                >
                  目前没有可以查看的数据哟~
                </div>
                <div
                  v-loading="loading03"
                  v-if="loading03"
                  class="loading addTop"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                ></div>
              </div>
            </div>
            <div class="pieItem">
              <div class="myTitleBox">
                <!-- <img src="@/assets/meng/video02_01.png" alt="" /> -->
                <p>观众年龄分布</p>
              </div>
              <div class="pieChartBox">
                <BigPie
                  :valueData="ageXData"
                  v-if="!loading03 && ageXData.length != 0"
                />
                <div
                  v-if="!loading03 && ageXData.length == 0"
                  class="noDataNoticewl"
                >
                  目前没有可以查看的数据哟~
                </div>
                <div
                  v-loading="loading03"
                  v-if="loading03"
                  class="loading addTop"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                ></div>
              </div>
            </div>
          </div>
          <!-- 直播战绩 -->
          <div class="talentDiv04">
            <div class="myTitleBox">
              <!-- <img src="@/assets/wang/live/gift.png" alt="" /> -->
              <p>直播战绩TOP10</p>
            </div>
            <table class="table" v-if="tableData.length != 0 && !loading04">
              <thead>
                <tr>
                  <th>开播时间</th>
                  <th>直播商品数</th>
                  <th>动销商品数</th>
                  <th>动销比</th>
                  <th>直播时长</th>
                  <th>场观人数</th>
                  <th>平均在线人数</th>
                  <th>人均看播时长</th>
                  <th>UV价值</th>
                  <th>客单价</th>
                  <th>总销量</th>
                  <th>总销售额</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in tableData" :key="index">
                  <td>{{ timestamp(item.beginTime, "Y-M-D h:m:s") }}</td>
                  <td>{{ format_num(item.liveProCount) }}</td>
                  <td>{{ format_num(item.liveProVolumeCount) }}</td>
                  <td>{{ item.proRate.toFixed(1) }}%</td>
                  <td>
                    {{ format_time((item.endTime - item.beginTime) * 1000) }}
                  </td>
                  <td>{{ format_num(item.sumPeople) }}</td>
                  <td>{{ format_num(item.avgonlinePeople) }}</td>
                  <td>{{ item.avgLookTime }}</td>
                  <td>{{ item.uv.toFixed(1) }}</td>
                  <td>{{ item.avgPrice.toFixed(1) }}</td>
                  <td>{{ format_num(item.liveVolume) }}</td>
                  <td>{{ format_num(item.livesales) }}</td>
                </tr>
              </tbody>
            </table>
            <div
              v-if="!loading04 && tableData.length == 0"
              class="noDataNoticewl"
            >
              目前没有可以查看的数据哟~
            </div>
            <div
              v-loading="loading04"
              v-if="loading04"
              class="loading addTop"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
            ></div>
          </div>
        </div>
        <div
          v-loading="loadingD"
          v-if="loadingD"
          class="loading addTop"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        ></div>
      </section>
      <div class="empty addTop" v-show="!hasData">
        <img src="@/assets/meng/empty.png" />
        <p>抱歉,数据雷达暂未查询到符合您要求的达人,换个条件试试吧~</p>
      </div>
    </div>
  </div>
</template>

<script>
import jsPDF from "jspdf";
import html2canvas from "html2canvas";
import BigPie from "@/pages/wang/talent/tdetails/component/BigPie.vue";
import DetailsBar from "@/pages/wang/talent/tdetails/component/DetailsBar";
export default {
  name: "matchResult",
  components: { BigPie, DetailsBar },
  data() {
    return {
      // 匹配出的达人
      talentList: [],
      cancel01: null,
      priceMine: "",
      cancel02: null,
      talentId: "",
      talentInfo: {},
      talentIdList: [],
      cancel03: null,
      cancel04: null,
      talentScoreList: [],
      livepriceList: {},
      // 商品
      finishFlag01: false,
      goodsKindData: [],
      // 价格分类
      cancel05: null,
      finishFlag02: false,
      priceKindList: [],
      loading01: true,
      loading02: true,
      // 性别
      cancel06: null,
      loading03: false,
      genderList: [],
      // 年龄
      ageXData: [],
      // ageYData: [],
      // 战绩
      cancel07: null,
      tableData: [],
      loading04: false,
      loadingD: true,
      talentRadio: "达人1",
      matchTime: "",
      // 达人信息
      matchTalentInfo: {},
      matchListDetail: [],
      hasData: false
    };
  },
  computed: {},
  watch: {
    talentRadio: function() {
      switch (this.talentRadio) {
        case "达人1":
          this.talentId = this.talentIdList[0];
          this.getTalentData();
          break;
        case "达人2":
          this.talentId = this.talentIdList[1];
          this.getTalentData();
          break;
        case "达人3":
          this.talentId = this.talentIdList[2];
          this.getTalentData();
          break;
        case "达人4":
          this.talentId = this.talentIdList[3];
          this.getTalentData();
          break;
        case "达人5":
          this.talentId = this.talentIdList[4];
          this.getTalentData();
          break;

        default:
          break;
      }
    }
  },
  created() {
    // 判断是进行匹配还是查看详情
    if (localStorage.getItem("mTalentHasData") == "true") {
      this.hasData = true;
      this.matchListDetail = JSON.parse(
        localStorage.getItem("matchListDetail")
      );
      this.matchTalentInfo = JSON.parse(
        localStorage.getItem("matchTalentInfo")
      );
      // console.log("matchListDetail", this.matchListDetail);
      // console.log("matchTalentInfo", this.matchTalentInfo);
      this.talentCount = this.matchTalentInfo.total;
      this.matchTime = this.matchTalentInfo.matchTime;
      // 1=进行匹配后刷新  2=从历史详情进来的
      if (localStorage.getItem("notMatchId") == "2") {
        this.matchListDetail.forEach(element => {
          this.talentIdList.push(element.author);
        });
        // 匹配分
        this.matchListDetail.forEach(element => {
          this.talentScoreList.push(element.score);
        });
      } else if (localStorage.getItem("notMatchId") == "1") {
        this.matchListDetail.forEach(element => {
          this.talentIdList.push(element.authorId);
        });
        // 匹配分
        this.matchListDetail.forEach(element => {
          this.talentScoreList.push(element.score);
        });
      }

      this.talentId = this.talentIdList[0];
      console.log("talentId", this.talentId);
      this.talentRadio = "达人1";
      this.getTalentData();
    } else {
      this.hasData = false;
      console.log(111);
    }
    document.title = "智能找达人&智能分析服务平台-掌上精选";
  },
  mounted() {},
  methods: {
    getTalentData() {
      // 匹配到的达人信息
      this.getTalentInfo();
      this.liveprice();
      this.proKindData();
      this.getPriceKind();
      this.getGenderData();
      this.getTable();
    },
    // 智能匹配信息
    getTalentInfo() {
      let that = this;
      that.loadingD = true;
      that.$axios
        .get(
          "/api/author/analysis",
          {
            params: {
              authorId: that.talentId
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel02 != null) {
                that.cancel02();
              }
              that.cancel02 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.talentInfo = res.data.data;
            that.loadingD = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //直播报价
    liveprice() {
      let that = this;
      that.$axios
        .get(
          "/api/author/liveprice",
          {
            params: {
              authorId: that.talentId
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel03 != null) {
                that.cancel03();
              }
              that.cancel03 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.livepriceList = res.data.data;
          } else if (res.data.code == 1002) {
            that.livepriceList = {};
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 商品分类
    proKindData() {
      let that = this;
      that.loading01 = true;
      that.$axios
        .get(
          "/api/author/analysisprocate",
          {
            params: {
              authorId: that.talentId
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel04 != null) {
                that.cancel04();
              }
              that.cancel04 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.goodsKindData = res.data.data;
            that.loading01 = false;
          } else if (res.data.code == 1002) {
            that.goodsKindData = [];
            that.loading01 = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 商品价格分类
    getPriceKind() {
      let that = this;
      that.loading02 = true;
      that.$axios
        .get(
          "/api/author/analysisprice",
          {
            params: {
              authorId: that.talentId
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel05 != null) {
                that.cancel05();
              }
              that.cancel05 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.priceKindList = res.data.data;
            that.loading02 = false;
          } else if (res.data.code == 1002) {
            that.priceKindList = [];
            that.loading02 = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 直播观众性别年龄分析
    getGenderData() {
      let that = this;
      that.loading03 = true;
      that.$axios
        .get(
          "/api/author/analysisfans",
          {
            params: {
              authorId: that.talentId
              // authorId: "84990209480",
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel06 != null) {
                that.cancel06();
              }
              that.cancel06 = c;
            })
          }
        )
        .then(res => {
          that.loading = false;
          if (res.data.code == 0) {
            that.genderList = res.data.data.fansSexList;
            that.ageXData = res.data.data.fansAgeList;
            that.loading03 = false;
          } else {
            that.genderList = [];
            that.ageXData = [];
            that.loading03 = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 战绩
    getTable() {
      let that = this;
      that.loading04 = true;
      that.$axios
        .get(
          "/api/author/analysislive",
          {
            params: {
              authorId: that.talentId
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel07 != null) {
                that.cancel07();
              }
              that.cancel07 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.tableData = res.data.data;
            that.loading04 = false;
          } else if (res.data.code == 1002) {
            that.tableData = [];
            that.loading04 = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 导出pdf
    exportPdf() {
      let _this = this;
      document.documentElement.scrollTop = 0;
      let canvas = document.createElement("canvas"); // 生成canvas上下文
      let context = canvas.getContext("2d");
      let _articleHtml = this.$refs.capture;
      let _w = _articleHtml.clientWidth; //获取需要导出pdf区域的宽度和高度
      let _h = _articleHtml.clientHeight;
      let scale = 3; //将画布宽&&高放大 增加清晰度
      if (_w > _h) {
        _h = _w;
      }
      canvas.width = _w * scale;
      canvas.height = _h * scale;
      context.scale(scale, scale);
      context.fillStyle = "#f5f5f5";
      let opts = {
        scale: 1,
        width: _w, //dom 原始宽度
        height: _h,
        canvas: canvas,
        useCORS: true //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
      };
      // 以上部分都是为了强化清晰度的，放大canvas画布
      html2canvas(_articleHtml, opts).then(canvas => {
        _this.createPdfAll(canvas, scale);
      });
    },
    //自定义宽高
    createPdfAll(canvas, scale) {
      let time = this.matchTime
        .split(" ")[0]
        .split("-")
        .join("");
      let contentWidth = canvas.width / scale;
      let contentHeight = canvas.height / scale;
      let pdf = new jsPDF("", "pt", [contentWidth, contentHeight]); //自定义宽高
      let pageData = canvas.toDataURL("image/jpeg", 1.0); //转换图片为dataURL
      pdf.addImage(pageData, "JPEG", 0, 0, contentWidth, contentHeight); //添加图像到页面
      pdf.save(`智能找达人-${time}.pdf`);
    },
    seeHistory() {
      let router = this.$router.resolve({
        path: `/inAnalysis/matchHistory`
      });
      window.open(router.href, "_blank");
    },
    // 跳达人详情
    toTalentPage(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/0`
      });
      window.open(router.href, "_blank");
    },
    reMatch() {
      this.$router.push({
        path: `/inAnalysis/SearchGoodsAly01`
      });
    }
  }
};
</script>
<style lang="less" scoped>
#matchResult {
  background-color: #f5f5f5;
  min-height: 100vh;
  .showDiv04 {
    background-color: #f5f5f5;
    .topDiv {
      box-sizing: border-box;
      width: 1200px;
      height: 100px;
      background-color: #ffffff;
      border-radius: 4px;
      padding: 20px;
      margin: 14px 0;
      div {
        display: flex;
        justify-content: space-between;
        p {
          font-size: 18px;
          color: #222222;
          font-weight: 600;
        }
        button {
          width: 88px;
          height: 32px;
          background-color: #ff7419;
          border-radius: 4px;
          font-size: 14px;
          color: #ffffff;
        }
        span:nth-child(1) {
          font-size: 14px;
          color: #888888;
        }
        span:nth-child(2) {
          font-size: 14px;
          color: #ff7419;
          cursor: pointer;
        }
      }
      div:nth-child(2) {
        margin-top: 11px;
      }
    }
    .tips {
      font-size: 14px;
      color: #888888;
      span {
        font-size: 14px;
        color: #fd7f2c;
        cursor: pointer;
      }
    }
    .tabBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 13px;
      .export {
        cursor: pointer;
        width: 70px;
        height: 32px;
        font-size:14px;
        line-height:30px;
        box-sizing: border-box;
        text-align: center;
        color:#67ac5b;
        border-radius: 4px;
        border: 1px solid #67ac5b;
        // display: flex;
        // justify-content: center;
        // align-items: center;
        span {
          display: inline-block;
          width:14px;
          height:14px;
          background:url('../../../../assets/zhao/daoc.png') no-repeat;
          background-size: 100% 100%;
          margin-right: 4px;
          position: relative;
          top: 2px;
        }
      }
      .export:hover{
        color: #80be76;
        border-color:#80be76;
        span{
          background:url('../../../../assets/zhao/daoc_h.png') no-repeat;
          background-size: 100% 100%;
        }
  }
    }
    .detailsBox {
      background-color: #ffffff;
      border-radius: 4px;
      box-sizing: border-box;
      padding: 20px;
      margin-top: 14px;
      .talentDiv01 {
        height: 150px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .div01 {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .avator {
            width: 72px;
            height: 72px;
            border: 1px solid #e5e5e5;
            border-radius: 50%;
            cursor: pointer;
          }
          .infoBox {
            margin-left: 16px;
            .titleBox {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              p {
                cursor: pointer;
                font-size: 18px;
                color: #222222;
                max-width: 217px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-weight: 600;
              }
              img {
                width: 16px;
                height: 16px;
                margin-left: 9px;
              }
            }
            .idText {
              font-size: 13px;
              color: #222222;
              padding-top: 3px;
              max-width: 217px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .info {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin-top: 4px;
              div {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                margin-right: 10px;
                img {
                  width: 16px;
                  height: 14px;
                }
                span {
                  font-size: 14px;
                  color: #555555;
                  padding-right: 10px;
                  padding-left: 6px;
                }
                p {
                  width: 1px;
                  height: 12px;
                  background-color: #e5e5e5;
                }
              }
            }
          }
        }
        .div02 {
          width: 570px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .divItem {
            width: 100%;
            display: flex;
            .itemdiv {
              p {
                text-align: center;
              }
              p:nth-child(1) {
                font-family: DINAlternate-Bold;
                font-size: 18px;
                color: #222222;
              }
              p:nth-child(2) {
                font-size: 14px;
                color: #555555;
                padding-top: 11px;
              }
            }
            .itemdiv:nth-child(1) {
              width: 155px;
            }
            .itemdiv:not(:first-child) {
              flex: 1;
            }
          }
          .divItem:nth-child(2) {
            margin-top: 20px;
          }
        }
        .div03 {
          box-sizing: border-box;
          width: 180px;
          height: 150px;
          background-color: #fcfcfc;
          border-radius: 4px;
          display: flex;
          flex-direction: column;
          padding: 0 26px;
          .concatWay {
            font-size: 14px;
            color: #555;
          }
          div {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            p {
              text-align: center;
            }
            p:nth-child(1) {
              width: 180px;
              padding: 0 10px;
              font-size: 22px;
              color: #ff7419;
              // font-family: DINAlternate-Bold;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            p:nth-child(2) {
              display: flex;
              justify-content: center;
              align-items: center;
              span {
                font-size: 14px;
                color: #555555;
              }
              img {
                width: 16px;
                height: 16px;
                margin-left: 4px;
                cursor: pointer;
              }
            }
          }
          div:nth-child(1) {
            border-bottom: solid 1px #e5e5e5;
          }
        }
      }
      .talentDiv02 {
        .priceBox {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 18px;
          .priceItem {
            position: relative;
            width: 25%;
            p {
              text-align: center;
            }
            p:nth-child(1) {
              font-size: 16px;
              color: #ff7419;
            }
            p:nth-child(2) {
              font-size: 14px;
              color: #555555;
              padding-top: 3px;
            }
          }
          .priceItem::after {
            display: block;
            content: "";
            width: 1px;
            height: 26px;
            background-color: #e5e5e5;
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(50%, -50%);
          }
          .priceItem:last-child::after {
            display: none;
          }
        }
      }
      // echarts部分
      .talentDiv03 {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        margin-top: 38px;
        .pieItem {
          width: 50%;
          .pieChartBox {
            height: 318px;
          }
        }
      }
      // 直播战绩
      .talentDiv04 {
        table {
          margin-top: 14px;
          // thead {
          // }
          tbody {
            tr {
              height: 54px;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .addtop {
    margin-top: 38px;
  }
  // title
  .myTitleBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    img {
      width: 17px;
      height: 16px;
    }
    p {
      font-size: 14px;
      color: #222222;
      padding-left: 26px;
      // font-weight: 600;
    }
    .bigText {
      font-size: 16px;
      color: #222222;
      padding-left: 9px;
      // font-weight: 600;
    }
  }
}
// 联系客服
.message_content img {
  width: 120px;
  height: 120px;
  margin-bottom: 6px;
}
.message_content {
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 12px;
  letter-spacing: 0px;
  text-align: center;
}
.kefuText {
  font-size: 22px;
  color: #ff7419;
  // font-family: DINAlternate-Bold;
}
.kefuText01 {
  font-size: 14px;
  color: #555;
}
</style>
